<!-- 
  如何修改仓库的数据：

      1. 当这样使用时 this.$store.state.xxx 可以直接修改【不推荐】
        可以开启严格模式，当这样修改时会报错

      2. 提交一个 mutation 【mutation 是唯一能够修改state数据的东西】
        this.$store.commit('mutationName', payload)
        this.$store.commit({
          type: 'mutationName',
          ...
        })

      3. 使用 mapMutations 辅助函数生成 methods
        mapMutations(["changeMsg", "increment"])
            {
              changeMsg(payload) {
                this.$store.commit('changeMsg', payload)
              },

              increment(payload) {
                this.$store.commit('increment', payload)
              }
            }
        mapMutations({
          fn1: 'changeMsg',
          fn2: 'increment'
        })
            {
              fn1(payload) {
                this.$store.commit('changeMsg', payload)
              },

              fn2(payload) {
                this.$store.commit('increment', payload)
              }
            }

 -->

<script>
import Hello from "./components/Hello.vue";
import { mapState, mapMutations } from "vuex";

export default {
  components: {
    Hello,
  },

  data() {
    return {
      localCount: 100,
    };
  },

  computed: {
    ...mapState(["msg", "count"]),

    localCountPlus() {
      return this.localCount + 1;
    },
  },

  methods: {
    ...mapMutations(["changeMsg"]),
  },

  // methods: {
  //   fn1() {
  //     // this.$store.commit("changeMsg", "张三");

  //     this.$store.commit({
  //       type: "changeMsg", // type 必须，用于描述 mutation 的名字
  //       name: "张三",
  //     });
  //   },
  // },
};
</script>

<template>
  <div>
    <h1>Vuex基础</h1>
    <button @click="changeMsg({ name: '张三' })">{{ msg }}</button>
    <button>{{ count }}</button>

    <hr />

    <Hello />
  </div>
</template>
